{{ define "user/table.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Left Sidebar Navigation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"> </script>
    <style>
        body {
            display: flex;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .sidebar {
            width: 250px;
            background-color: #333;
            height: 100vh;
            overflow: auto;
        }
        .sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .sidebar ul li a {
            display: flex;
            align-items: center;
            color: white;
            padding: 16px;
            text-decoration: none;
        }
        .sidebar ul li a:hover {
            background-color: #444;
        }
        .sidebar ul li a i {
            margin-right: 10px;
        }
        .content {
            flex: 1;
            padding: 20px;
        }
        /* 二级导航样式 */
        .sidebar ul li ul {
            display: none; /* 初始状态下隐藏二级导航 */
            padding-left: 20px;
        }
        .sidebar ul li.submenu {
            display: none; /* 初始状态下隐藏二级导航 */
        }
        /* 选中状态的样式 */
        .sidebar ul li a.active {
            background-color: #555;
        }
        .top{
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #f44336;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <ul>
        <li><a href="/v1/index" onclick="setActive(this); loadPage(this.href); return false;"><i class="fas fa-home"></i> 首页</a></li>
        <li>
            <a href="#" onclick="toggleSubmenu(this)"><i class="fas fa-info-circle"></i> 用户管理 <i class="fas fa-caret-down"></i></a>
            <ul class="submenu">
                <li><a href="/backendUsers/account/list" onclick="setActive(this); loadPage(this.href); return false;"><i class="fas fa-user"></i>账号管理</a></li>
                <li><a href="/backendUsers/role/list" onclick="setActive(this); loadPage(this.href); return false;"><i class="fas fa-building"></i>角色管理</a></li>
                <li><a href="/backendUsers/permission/list" onclick="setActive(this); loadPage(this.href); return false;"><i class="fas fa-history"></i>权限管理</a></li>
            </ul>
        </li>
        <li>
            <a href="#" onclick="toggleSubmenu(this)"><i class="fas fa-cogs"></i> 商品管理 <i class="fas fa-caret-down"></i></a>
            <ul class="submenu">
                <li><a href="service1.html" onclick="setActive(this); loadPage(this.href); return false;"><i class="fas fa-wrench"></i> Service 1</a></li>
                <li><a href="service2.html" onclick="setActive(this); loadPage(this.href); return false;"><i class="fas fa-tools"></i> Service 2</a></li>
                <li><a href="service3.html" onclick="setActive(this); loadPage(this.href); return false;"><i class="fas fa-tasks"></i> Service 3</a></li>
            </ul>
        </li>
        <li><a href="contact.html" onclick="setActive(this); loadPage(this.href); return false;"><i class="fas fa-envelope"></i> Contact</a></li>
    </ul>
</div>
<div class="content">
    <iframe id="pageFrame" src="home.html" style="width: 100%; height: 100%; border: none;"></iframe>
</div>

<button class="top"  onclick="unLogin()">退出登录</button>

</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
    function unLogin() {
        // 当页面加载完成后执行
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('确定要退出登录吗？', {
                title: '操作确认',
                area: ['400px', '200px'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                shade: 0.5,
                closeBtn: 0,
                anim: 2,
                icon: 3,
                //弹出页面居中
                offset: ['calc(50% - 200px)', 'calc(50% - 100px)']
                // content: '<div style="padding:20px;">这是一个自定义的询问框，你可以在这里添加更多的信息。</div>'
            }, function(index){
                $.ajax({
                    type: "GET",
                    url: "/login/userOutLogin",
                    success: function(response) {
                        if (response.code==200)
                        {
                            layer.close(index);
                            location.reload();
                            // window.location.href="/v1/userLoginFrom"
                        }

                    }
                });


                // 这里可以添加执行操作的代码，例如发送请求、修改数据等
            }, function(index){
                // 点击取消按钮的回调函数
                // layer.msg('你点击了取消按钮，操作已取消', {icon: 2});
                layer.close(index);
            });

        });
    }
    function toggleSubmenu(elem) {
        var submenu = elem.nextElementSibling;
        if (submenu.style.display === "block") {
            submenu.style.display = "none";
        } else {
            submenu.style.display = "block";
        }
    }
    function setActive(elem) {
        // 移除所有链接的选中状态
        var links = document.querySelectorAll('.sidebar ul li a');
        for (var i = 0; i < links.length; i++) {
            links[i].classList.remove('active');
        }
        // 将当前点击的链接设置为选中状态
        elem.classList.add('active');
        // 将选中的元素的 href 属性存储到 localStorage 中
        localStorage.setItem('activeLink', elem.getAttribute('href'));
    }
    function loadPage(url) {
        var iframe = document.getElementById('pageFrame');
        iframe.src = url;
    }
    window.onload = function() {
        var activeLink = localStorage.getItem('activeLink');
        if (activeLink) {
            var links = document.querySelectorAll('.sidebar ul li a');
            for (var i = 0; i < links.length; i++) {
                if (links[i].getAttribute('href') === activeLink) {
                    links[i].classList.add('active');
                    loadPage(activeLink);
                }
            }
        }
    }
</script>
{{ end }}